<template>
  <div class="law">
    <lawHead ref="lawHeadRef" title="批量搜索"></lawHead>
    <div class="cont" style=" margin-top: 60px;">
      <div class="content">
        <div class="title">
          批量搜索
          <img src="@/assets/zhome/que.png" alt />
        </div>
        <div class="tab z_flex">
          <div
            class="flex_1"
            v-for="(item,index) in 2"
            :key="index"
          >{{ index == 0 ? '号码' : '申请/权利人' }}</div>
        </div>
        <div class="ipt">
          <el-input
            v-model="textarea"
            type="textarea"
            resize="none"
            placeholder="系统将根据输入号码返回所有匹配到的公开文本，单次输入号码上限为2000个。支持在此输入多个公开公告)号或申请号查询，号码之间请用换行、分号、逗号或空格分隔。"
          />
        </div>
      </div>

      <div class="check">
        <div @click="checkIndex = index" v-for="(item,index) in checkList" :key="index">
          <img v-if="checkIndex !== index" src="@/assets/zhome/nocheck.png" alt />
          <img v-else src="@/assets/zhome/check.png" alt />
          {{ item.title }}
        </div>
      </div>

      <div class="font">
        <img src="@/assets/zhome/up.png" alt />上传文件
        <div class="file">
          下载模版示例：
          <span>EXCEL</span>
        </div>
        <div class="btn gay">清空</div>
        <div class="btn">开始匹配</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import lawHead from "@/components/patent/head.vue";
let checkList = reactive([
  {
    title: "公开(公告)号"
  },
  { title: "申请号" }
]);
let checkIndex = ref(0);
</script>
<style lang="scss" scoped>
.ipt {
  height: 400px;
  border: 1px solid #d6dce0;
  border-radius: 0px 4px 4px 4px;
}
.content {
  padding: 20px;
  .ipt {
    display: flex;
  }
  .el-textarea {
    height: 100%;
    padding: 20px 18px;
  }
  ::v-deep .el-textarea__inner {
    border: none;
    box-shadow: none;
    padding: 0;
    height: 100%;
  }
  .title {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #202020;
    line-height: 22px;
    display: flex;
    align-items: center;
    img {
      margin-left: 4px;
      cursor: pointer;
    }
  }

  .tab {
    width: 290px;
    height: 48px;
    background: url("@/assets/zhome/law.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    cursor: pointer;
    div {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #575966;
      line-height: 48px;
    }
    div:first-of-type {
      color: #ffffff;
    }
  }
}
.law {
  padding-bottom: 60px;
}
.check {
  display: flex;
  justify-content: flex-end;
  padding: 3px 20px 35px;
  div {
    margin-left: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      margin-right: 8px;
    }
  }
}
.cont {
  background: white;
  margin: 0 240px 60px;
  .font {
    height: 85px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-top: 1px solid #d6dce0;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #202020;
    line-height: 20px;
    .btn {
      height: 36px;
      background: #0052d9;
      border-radius: 2px;
      width: 88px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: center;
      color: #ffffff;
      line-height: 36px;
      margin-left: 20px;
      cursor: pointer;
    }
    .gay {
      width: 80px;
      height: 36px;
      background: #f5f6f8;
      border-radius: 2px;
      color: #202020;
    }
    .file {
      display: flex;
      align-items: center;

      margin-left: 20px;
      flex: 1;
      span {
        color: #0052d9;
        cursor: pointer;
      }
    }
  }
}
</style>